<template>
  <div class="swipper-box">
    <swiper :options="swiperOption" ref="mySwiper">
      <!--slides-->
      <swiper-slide v-for="item in swipperList" :key="item.id">
        <img class="swipper-img" :src="item.imgUrl" alt="">
      </swiper-slide>
      <!--Optionalcontrols-->
      <div class="swiper-pagination" slot="pagination"></div>
      <!--   <div class="swiper-button-prev" slot="button-prev"></div>-->
      <!--   <div class="swiper-button-next" slot="button-next"></div>-->
      <!--   <div class="swiper-scrollbar" slot="scrollbar"></div>-->
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwipper',
  data () {
    return {
      // 轮播器配置对象
      swiperOption: {
        loop: true,
        // 轮播图项目符号对象
        pagination: {
          el: '.swiper-pagination'
        }
        //  启用轮播循环
      },
      swipperList: [
        {
          id: 1,
          imgUrl: '//img.alicdn.com/imgextra/i1/6000000000382/O1CN01h4sNLB1Eh00G6Kmrn_!!6000000000382-0-lubanimage.jpg'
        },
        {
          id: 2,
          imgUrl: 'https://img.alicdn.com/simba/img/TB15tIjGVXXXXcoapXXSutbFXXX.jpg'
        },
        {
          id: 3,
          imgUrl: 'https://gtms04.alicdn.com/tps/i4/TB1pgxYJXXXXXcAXpXXrVZt0FXX-640-200.jpg'
        }
      ]
    }
  }
}
</script>

<style scoped lang="stylus">
  .swipper-box{
    height: 0;
    padding-bottom: 40%;
    overflow: hidden;
  }
  .swipper-img {
    width: 100%;
  }

  .swipper-box >>> .swiper-pagination-bullet
    background-color white
    opacity 1

  .swipper-box >>> .swiper-pagination-bullet-active
    background-color #df2127
  .swipper-box{
    height: 0;
    padding-bottom: 30%;
    overflow: hidden;
  }
  .mui-content .mui-grid-view.mui-grid-9
    background white
    border 0
  .mui-content .mui-grid-view.mui-grid-9 .mui-table-view-cell
    border 0
    padding 0
  .mui-content .mui-grid-view.mui-grid-9 .mui-col-xs-4
    width 20%
</style>
